<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>放大镜效果</title>
		<style>
			* {
				padding: 0;
				margin: 0;
			}

			#left, #right {
				position: absolute;
				width: 400px;
				height: 400px;
				border: 5px solid black;
				top: 200px;
			}

			#left {
				left: 400px;
			}

			#right {
				left: 900px;
				overflow: hidden;
				display: none;
			}

			#rect {
				width: 200px;
				height: 200px;
				background-color: yellow;
				position: absolute;
				top: 0;
				opacity: .5;
				display: none;
			}

			#big {
				position: absolute;
			}

		</style>
	</head>
	<body>

		<div id="left">
			<img src="img/small.jpg" alt="" id="small">
			<div id="rect"></div>
		</div>

		<div id="right">
			<img src="img/big.jpg" alt="" id="big">
		</div>
		
	</body>
</html>
<script>
	// 获取元素
	var smallImg = document.getElementById('small');
	var bigImg = document.getElementById('big');
	var rectDiv = document.getElementById('rect');
	var rightDiv = document.getElementById('right');
	var leftDiv = document.getElementById('left');

	// 鼠标悬浮在小图片上方时执行该方法
	leftDiv.onmouseover = function() {

		// 显示放大镜和右边大图
		rectDiv.style.display = "block";
		rightDiv.style.display = "block";

	};

	leftDiv.onmousemove = function(e) {

		var left = e.clientX - rectDiv.offsetWidth / 2 - 400 - 5;
		var top = e.clientY - rectDiv.offsetHeight / 2 - 200 - 5;

		left = left <= 0 ? 0 : left;
		left = left >= 200 ? 200 : left;
			top = top <= 0 ? 0 : top;						
		top = top >= 200 ? 200 : top;

		// console.log(left, top);
		rectDiv.style.left = left + 'px';
		rectDiv.style.top = top + 'px';

		// 2的来历:   
		// (bigImg.offsetWidth - rightDiv.clientWidth) / leftDiv.clientWidth
		bigImg.style.left = -2 * left + 'px';
		bigImg.style.top = -2 * top + 'px';

	};

	leftDiv.onmouseout = function() {
		rectDiv.style.display = "none";
		rightDiv.style.display = "none";
	};


	// 调研Date对象方法, 写一个表




</script>








